<template>
  <div>
    <div class="titleHeader">
      <h2 class="fl ItemTitle">输入标题:</h2>
      <el-input
        class="myINput fl"
        placeholder="请输入标题"
        suffix-icon="el-icon-edit"
        v-model="input1"
      >
      </el-input>
      <h2 class="fl ItemTitle">简介:</h2>
      <el-input class="myINput2 fl" placeholder="请输入简介" v-model="input2">
      </el-input>
    </div>
    <div class="clearfix">
      <div class="mybody left clearfix">
        <quill-editor
          class="ql-editor"
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
        >
        </quill-editor>
        <el-button class="button fr" type="warning">取消</el-button>

        <el-button class="fr button" type="primary" @click="publish()"
          >立即发布</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import * as Quill from "quill"; // 引入编辑器
// 调整上传图片大小
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageResize", ImageResize);

export default {
  name: "addnotice",
  mounted() {
    //下面部分代码都是为了实现富文本编辑器的正常使用
    // 自定义字体大小
    const Size = Quill.import("attributors/style/size");
    Size.whitelist = ["10px", "12px", "16px", "18px", "20px", "30px", "32px"];
    Quill.register(Size, true);
    // 自定义字体类型
    var fonts = [
      "SimSun",
      "SimHei",
      "Microsoft-YaHei",
      "KaiTi",
      "FangSong",
      "Arial",
      "sans-serif",
    ];
    var Font = Quill.import("formats/font");
    Font.whitelist = fonts;
    Quill.register(Font, true);

    //富文本编辑器选项提示
    // toolbar标题
    const titleConfig = [
      { Choice: ".ql-insertMetric", title: "跳转配置" },
      { Choice: ".ql-bold", title: "加粗" },
      { Choice: ".ql-italic", title: "斜体" },
      { Choice: ".ql-underline", title: "下划线" },
      { Choice: ".ql-header", title: "段落格式" },
      { Choice: ".ql-strike", title: "删除线" },
      { Choice: ".ql-blockquote", title: "块引用" },
      { Choice: ".ql-code", title: "插入代码" },
      { Choice: ".ql-code-block", title: "插入代码段" },
      { Choice: ".ql-font", title: "字体" },
      { Choice: ".ql-size", title: "字体大小" },
      { Choice: '.ql-list[value="ordered"]', title: "编号列表" },
      { Choice: '.ql-list[value="bullet"]', title: "项目列表" },
      { Choice: ".ql-direction", title: "文本方向" },
      { Choice: '.ql-header[value="1"]', title: "h1" },
      { Choice: '.ql-header[value="2"]', title: "h2" },
      { Choice: ".ql-align", title: "对齐方式" },
      { Choice: ".ql-color", title: "字体颜色" },
      { Choice: ".ql-background", title: "背景颜色" },
      { Choice: ".ql-image", title: "图像" },
      { Choice: ".ql-video", title: "视频" },
      { Choice: ".ql-link", title: "添加链接" },
      { Choice: ".ql-formula", title: "插入公式" },
      { Choice: ".ql-clean", title: "清除字体格式" },
      { Choice: '.ql-script[value="sub"]', title: "下标" },
      { Choice: '.ql-script[value="super"]', title: "上标" },
      { Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
      { Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
      { Choice: ".ql-header .ql-picker-label", title: "标题大小" },
      { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: "标题一" },
      { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: "标题二" },
      { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: "标题三" },
      { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: "标题四" },
      { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: "标题五" },
      { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: "标题六" },
      { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
      { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: "小号" },
      { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: "大号" },
      {
        Choice: '.ql-size .ql-picker-item[data-value="huge"]',
        title: "超大号",
      },
      { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
      { Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
      {
        Choice: '.ql-align .ql-picker-item[data-value="center"]',
        title: "居中对齐",
      },
      {
        Choice: '.ql-align .ql-picker-item[data-value="right"]',
        title: "居右对齐",
      },
      {
        Choice: '.ql-align .ql-picker-item[data-value="justify"]',
        title: "两端对齐",
      },
    ];
    for (let item of titleConfig) {
      let tip = document.querySelector(".quill-editor " + item.Choice);
      if (!tip) continue;
      tip.setAttribute("title", item.title);
    }
  },
  created() {},
  components: {
    quillEditor,
  },
  data() {
    return {
      //富文本编辑器收集的内容
      content: `<p>请在这里输入你的内容~</p>`, //双向数据绑定数据,
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [
              {
                size: [
                  "12",
                  "14",
                  "16",
                  "18",
                  "20",
                  "22",
                  "24",
                  "28",
                  "32",
                  "36",
                ],
              },
            ], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["image", "video"], // 链接、图片、视频
          ],
          // 调整图片大小
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
        },
        placeholder: "请输入正文",
      },
      userInfo: "",
      //用于控制话题选项是否可见
      visible: false,
      tags: [],
      attachmentUrls: [],
      uploadUrl: "http://localhost:8081/file/addFile",
      //上传的附件列表
      fileList: [],
      //这个参数用于确认文件是否合法，将不会传给后端
      ifLegal: true,
      identity: 1,
      isAdmin: false,
      input1: "",
      input2: "",
    };
  },
  methods: {
    //onEditor开头的均为富文本编辑器的操作
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.content = html;
    },
    publish() {
      console.log(this.content);
    },
  },
};
</script>

<style lang="css" scoped>
.mybody {
  padding-bottom: 10px;
}
.left {
  /* float: left; */
  /* width: 80%; */
  /* height: 600px; */
  border-radius: 5px;
  /* margin: 0 auto; */
  /* margin-right: 20px; */
  background-color: white;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

::v-deep .ql-editor {
  min-height: 460px;
  /* max-height: 400px; */
  /* max-height: 500px;/ */
  /* height: 500px; */
}
.addinterest {
  margin-top: 10px;
  margin-right: 20px;
}

.titleHeader {
  height: 60px;
  /* width: 90%; */
  margin-bottom: 10px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.myINput {
  line-height: 60px;
  width: 200px;
}
.ItemTitle {
  line-height: 60px;
  margin: 0 20px;
}
.myINput2 {
  line-height: 60px;
  width: 400px;
}

.button {
  margin: 0 10px;
}
</style>
